<template>
  <div class="login">
    <h1>登录页</h1>
    <ul>
      <li>
        <input type="text" v-model="userName" placeholder="请输入用户名" />
      </li>
      <li>
        <input type="password" v-model="password" placeholder="请输入密码" />
      </li>
      <li>
        <button @click="loginHandle">登录</button>
      </li>
      <li>
        <router-link :to="{name:'Reg'}" class="reg-link">没有账号，我要注册</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { login } from '../services/user'
import { setToken } from '../utils/auth'
export default {
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    /* loginHandle() {
      const data = {
        userName: this.userName,
        password: this.password
      }
      login(data)
    } */

    async loginHandle() {
      if (this.userName && this.password) {
        const res = await login({
          userName: this.userName,
          password: this.password
        })
        console.log(res)
        if (res.code === 'success') {
          setToken(res.token)
          this.$router.push({ name: 'Home' })
        } else {
          alert(res.message)
        }
      } else {
        alert('请输入用户名和密码')
      }
    }
  }
}
</script>

<style scoped>
.login {
  /* text-align: center; */
  /* margin: 0.3rem auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  margin-top: 20px;
}
ul li {
  margin: 0.05rem 0;
  width: 100%;
}
li input {
  width: 2rem;
  height: 0.3rem;
  font-size: 0.14rem;

  border: none;
  border-bottom: 0.01rem solid rgb(156, 155, 155);
}
li button {
  width: 1rem;
  height: 0.3rem;
  background: blueviolet;
  color: white;
  line-height: 0.3rem;
  border-radius: 0.06rem;
  border: none;
  font-size: 0.14rem;
}
.reg-link {
  float: right;
  font-size: 0.1rem;
  width: 100%;
  display: block;
}
</style>
